//生态服务管理

<template>
  <a-layout>
    <a-layout-content>
      <!-- 服务类型选择 -->
      <!-- <div class="content-carda"> -->
      <a-card title="生态服务管理" style="min-height: 840px">
        <a-form layout="vertical">
          <a-form-item label="服务类型选择">
            <!-- 使用 v-model 绑定，选择不同服务类型后触发展示不同表单 -->
            <a-select v-model="selectedService" @change="handle" placeholder="请选择服务类型" style="width: 270px">
              <a-select-option value="物质供给">物质供给</a-select-option>
              <a-select-option value="文化服务">文化服务</a-select-option>
              <a-select-option value="调节服务">调节服务</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-card>
      <!-- </div> -->

      <!-- 数据录入页面 -->
      <div v-if="selectedService === '物质供给'" class="content-card">
        <h3>物质供给</h3>
        <a-form layout="vertical">
          <a-form-item label="产品类型">
            <a-input v-model:value="provisionData.type" style="width: 270px" placeholder="请输入产品类型" />
          </a-form-item>
          <a-form-item label="实物量 (单位: 吨)">
            <a-input v-model:value="provisionData.quantity" placeholder="请输入实物量" style="width: 270px" />
          </a-form-item>
          <a-form-item label="市场价格 (单位: 元/吨)">
            <a-input v-model:value="provisionData.valuess" style="width: 270px" placeholder="请输入市场价格" />
          </a-form-item>
          <a-button type="primary" @click="submitProvisioningData">提交</a-button>
        </a-form>
      </div>

      <div v-if="selectedService === '文化服务'" class="content-card">
        <h3>文化服务</h3>
        <a-form layout="vertical">
          <a-form-item label="工业旅游景点名称">
            <a-input v-model="culturalData.type" placeholder="请输入景点名称" style="width: 270px" />
          </a-form-item>
          <a-form-item label="游客年旅游总人次">
            <a-input v-model="culturalData.usageData" style="width: 270px" placeholder="请输入游客人数" />
          </a-form-item>
          <a-form-item label="直接费用 (单位: 元)">
            <a-input v-model="culturalData.directValue" style="width: 270px" placeholder="请输入直接费用" />
          </a-form-item>
          <a-form-item label="间接费用 (单位: 元)">
            <a-input v-model="culturalData.indirectValue" style="width: 270px" placeholder="请输入间接费用" />
          </a-form-item>
          <a-button type="primary" @click="submitData">提交</a-button>
        </a-form>
      </div>

      <div v-if="selectedService === '调节服务'" class="content-card">
        <h3>调节服务</h3>
        <a-form layout="vertical">
          <a-form-item label="服务类型">
            <!-- 调节服务类型选择 -->
            <a-select v-model="regulatingData.serviceType" placeholder="请选择调节服务类型" @change="handleToble" style="width: 270px">
              <a-select-option value="水调节">水调节</a-select-option>
              <a-select-option value="空气调节">空气调节</a-select-option>
              <a-select-option value="气候调节">气候调节</a-select-option>
            </a-select>
          </a-form-item>

          <!-- 根据不同调节服务类型展示不同输入框 -->
          <div v-if="regulatingData.serviceType === '水调节'">
            <a-form-item label="水源涵养量 (单位: 立方米)">
              <a-input v-model="regulatingData.waterQuantity" placeholder="请输入水源涵养量" />
            </a-form-item>
            <a-form-item label="替代设施成本 (单位: 元)">
              <a-input v-model="regulatingData.facilityCost" placeholder="请输入替代设施成本" />
            </a-form-item>
          </div>

          <div v-if="regulatingData.serviceType === '空气调节'">
            <a-form-item label="空气质量改善量 (单位: 吨/年)">
              <a-input v-model="regulatingData.airImprovement" placeholder="请输入空气质量改善量" style="width: 270px" />
            </a-form-item>
            <a-form-item label="替代设施成本 (单位: 元)">
              <a-input v-model="regulatingData.facilityCost" placeholder="请输入替代设施成本" style="width: 270px" />
            </a-form-item>
          </div>

          <div v-if="regulatingData.serviceType === '气候调节'">
            <a-form-item label="碳吸收量 (单位: 吨)">
              <a-input v-model="regulatingData.carbonAbsorption" placeholder="请输入碳吸收量" style="width: 270px" />
            </a-form-item>
            <a-form-item label="碳价格 (单位: 元/吨)">
              <a-input v-model="regulatingData.carbonPrice" placeholder="请输入碳价格" style="width: 270px" />
            </a-form-item>
          </div>

          <a-button type="primary" @click="submitData">提交</a-button>
        </a-form>
      </div>

      <!-- 数据展示 -->
      <div class="show-card">
        <h3>数据展示</h3>
        <a-table
          v-if="selectedService === '物质供给'"
          :columns="recordProvisioningColumns"
          :dataSource="dataProvisioningRecords"
          rowKey="id"
          bordered
          @change="handleProvisioningChange"
          class="carbon-assets-table"
          :pagination="pagination"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a-button type="link" @click="editRecord(record)">编辑</a-button>
              <a-button type="link" danger @click="deleteRecord(record)">删除</a-button>
            </template>
          </template>
        </a-table>
        <a-table
          v-if="selectedService === '文化服务'"
          :columns="recordCulturalColumns"
          :dataSource="dataCulturalRecords"
          rowKey="id"
          bordered
          @change="handleCulturalChange"
          class="carbon-assets-table"
          :pagination="pagination"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a-button type="link" @click="editRecord(record)">编辑</a-button>
              <a-button type="link" danger @click="deleteRecord(record)">删除</a-button>
            </template>
          </template>
        </a-table>
        <a-table
          v-if="selectedService === '调节服务'"
          :columns="recordRegulatingColumns"
          :dataSource="dataRegulatingRecords"
          rowKey="id"
          bordered
          @change="handleRegulatingChange"
          class="carbon-assets-table"
          :pagination="pagination"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a-button type="link" @click="editRecord(record)">编辑</a-button>
              <a-button type="link" danger @click="deleteRecord(record)">删除</a-button>
            </template>
          </template>
        </a-table>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
  import { h, reactive, computed, ref, onMounted } from 'vue';
  import { ecoServices } from '/@/api/Carbon module/Carbon asset module/Ecological value accounting/ecoServices';
  import { smartSentry } from '/@/lib/smart-sentry';

  // 当前选择的服务类型
  const selectedService = ref('物质供给');

  // 物质供给数据
  const provisionData = ref({
    type: '',
    quantity: '',
    valuess: '',
  });

  // 文化服务数据
  const culturalData = ref({
    type: '',
    usageData: '',
    directValue: '',
    indirectValue: '',
  });

  // 调节服务数据
  const regulatingData = ref({
    serviceType: '',
    waterQuantity: '',
    facilityCost: '',
    airImprovement: '',
    carbonAbsorption: '',
    carbonPrice: '',
  });

  // 数据记录
  const dataProvisioningRecords = ref([]);
  // 表格列定义
  const recordProvisioningColumns = [
    { title: '产品类型', dataIndex: 'type', key: 'type' },
    { title: '产品实物量', dataIndex: 'quantity', key: 'quantity' },
    { title: '产品价值量', dataIndex: 'valuess', key: 'valuess' },
    { title: '操作', key: 'action', scopedSlots: { customRender: 'action' } },
  ];

  // 数据记录
  const dataCulturalRecords = ref([]);
  // 表格列定义
  const recordCulturalColumns = [
    { title: '景点名称', dataIndex: 'type', key: 'type' },
    { title: '总人次', dataIndex: 'usageData', key: 'usageData' },
    { title: '直接费用', dataIndex: 'directValue', key: 'directValue' },
    { title: '间接费用', dataIndex: 'indirectValue', key: 'indirectValue' },
    { title: '操作', key: 'action', scopedSlots: { customRender: 'action' } },
  ];

  // 数据记录
  const dataRegulatingRecords = ref([]);
  // 表格列定义
  const recordRegulatingColumns = [
    { title: '服务类型', dataIndex: 'type', key: 'type' },
    { title: '服务功能量', dataIndex: 'quantity', key: 'quantity' },
    { title: '服务价值量', dataIndex: 'valuess', key: 'valuess' },
    { title: '操作', key: 'action', scopedSlots: { customRender: 'action' } },
  ];

  // 提交数据
  const submitData = () => {
    const newData = {
      id: Date.now(),
      serviceType: selectedService.value,
      details: '',
    };

    // 根据服务类型保存不同的数据
    if (selectedService.value === '物质供给') {
      newData.details = `产品类型: ${provisionData.value.type}, 实物量: ${provisionData.value.quantity}, 市场价格: ${provisionData.value.valuess}`;
    } else if (selectedService.value === '文化服务') {
      newData.details = `景点名称: ${culturalData.value.touristAttraction}, 游客总人次: ${culturalData.value.visitorCount}, 直接费用: ${culturalData.value.directCost}, 间接费用: ${culturalData.value.indirectCost}`;
    } else if (selectedService.value === '调节服务') {
      if (regulatingData.value.serviceType === '水调节') {
        newData.details = `水源涵养量: ${regulatingData.value.waterQuantity}, 替代设施成本: ${regulatingData.value.facilityCost}`;
      } else if (regulatingData.value.serviceType === '空气调节') {
        newData.details = `空气质量改善量: ${regulatingData.value.airImprovement}, 替代设施成本: ${regulatingData.value.facilityCost}`;
      } else if (regulatingData.value.serviceType === '气候调节') {
        newData.details = `碳吸收量: ${regulatingData.value.carbonAbsorption}, 碳价格: ${regulatingData.value.carbonPrice}`;
      }
    }

    // 将数据存入记录数组
    // dataRecords.value.push(newData);
  };

  const submitProvisioningData = async () => {
    console.log(provisionData.value);
    if (provisionData.value.type) {
      try {
        await ecoServices.addProvisioning(provisionData.value);
        queryProvisioningData();
      } catch (error) {
        console.log(error);
      }
    }
    provisionData.value = {
      type: '',
      quantity: '',
      valuess: '',
    };
  };

  const handle = (e) => {
    selectedService.value = e;
    queryFormState.pageNum = 1;
    if (e == '物质供给') {
      queryProvisioningData();
    } else if (e == '文化服务') {
      queryCulturalData();
    } else if (e == '调节服务') {
      queryRegulatingData();
    }
  };

  const handleToble = (e) => {
    regulatingData.value.serviceType = e;
  };
  // 编辑数据记录
  const editRecord = (record) => {
    // 编辑逻辑
  };

  // 删除数据记录
  const deleteRecord = async (record) => {
    if (selectedService.value == '物质供给') {
      await ecoServices.deleteProvisioning(record.provisioningServiceId);
      queryProvisioningData();
    } else if (selectedService.value == '文化服务') {
      queryCulturalData();
    } else if (selectedService.value == '调节服务') {
      queryRegulatingData();
    }
  };

  // 查询碳汇列表
  const pagination = computed(() => ({
    total: total.value,
    pageSize: queryFormState.pageSize,
    current: queryFormState.pageNum,
    showTotal: (total) => `总共${total}项`,
  }));
  const queryFormState = reactive({
    pageNum: 1,
    pageSize: 10,
  });
  const tableLoading = ref(false);
  const total = ref(0); //总数
  const queryForm = reactive({ ...queryFormState });
  async function queryProvisioningData() {
    tableLoading.value = true;
    try {
      queryForm.pageNum = queryFormState.pageNum; // 确保页码同步
      queryForm.pageSize = queryFormState.pageSize;
      let queryResult = await ecoServices.queryProvisioning(queryForm);
      dataProvisioningRecords.value = queryResult.data.list;
      total.value = queryResult.data.total;
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      tableLoading.value = false;
    }
  }
  const handleProvisioningChange = (pagination, filters, sorter) => {
    queryFormState.pageNum = pagination.current; // 更新当前页
    queryFormState.pageSize = pagination.pageSize; // 更新页大小
    queryProvisioningData();
  };
  async function queryCulturalData() {
    tableLoading.value = true;
    try {
      queryForm.pageNum = queryFormState.pageNum; // 确保页码同步
      queryForm.pageSize = queryFormState.pageSize;
      let queryResult = await ecoServices.queryCultural(queryForm);
      dataCulturalRecords.value = queryResult.data.list;
      total.value = queryResult.data.total;
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      tableLoading.value = false;
    }
  }
  const handleCulturalChange = (pagination, filters, sorter) => {
    queryFormState.pageNum = pagination.current; // 更新当前页
    queryFormState.pageSize = pagination.pageSize; // 更新页大小
    queryCulturalData();
  };
  async function queryRegulatingData() {
    tableLoading.value = true;
    try {
      queryForm.pageNum = queryFormState.pageNum; // 确保页码同步
      queryForm.pageSize = queryFormState.pageSize;
      let queryResult = await ecoServices.queryRegulating(queryForm);
      dataRegulatingRecords.value = queryResult.data.list;
      total.value = queryResult.data.total;
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      tableLoading.value = false;
    }
  }
  const handleRegulatingChange = (pagination, filters, sorter) => {
    queryFormState.pageNum = pagination.current; // 更新当前页
    queryFormState.pageSize = pagination.pageSize; // 更新页大小
    queryRegulatingData();
  };

  onMounted(() => {
    dataProvisioningRecords.value = [];
    dataCulturalRecords.value = [];
    dataRegulatingRecords.value = [];
  });
</script>

<style scoped>
  .ant-layout-content {
    display: flex;
  }

  .content-card {
    /* margin-bottom: 10px; */
    padding: 24px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 25%;
    margin-left: 12px;
  }
  .show-card {
    padding: 24px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 75%;
    margin-left: 12px;
  }
  .content-carda {
    margin-bottom: 10px;
    padding: 24px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 28%;
  }
  a-form-item {
    margin-bottom: 16px;
  }

  a-button {
    margin-top: 16px;
  }
</style>
